<template>
  <el-tabs v-model="subTabsName" v-loading="formLoading">
    <el-tab-pane :label="t('ustcstudent.view.tab.basic')" name="basicData">
      <InfoRuleItemTable v-model="basicData" />
    </el-tab-pane>
    <el-tab-pane :label="t('ustcstudent.view.tab.university')" name="universityData">
      <InfoRuleItemTable v-model="universityData" />
    </el-tab-pane>
    <el-tab-pane :label="t('ustcstudent.view.tab.admission')" name="admissionData">
      <InfoRuleItemTable v-model="admissionData" />
    </el-tab-pane>
    <el-tab-pane :label="t('ustcstudent.view.tab.degree')" name="degreeData">
      <InfoRuleItemTable v-model="degreeData" />
    </el-tab-pane>
    <el-tab-pane :label="t('ustcstudent.view.tab.personal')" name="personalData">
      <InfoRuleItemTable v-model="personalData" />
    </el-tab-pane>
    <el-tab-pane :label="t('ustcstudent.view.tab.work')" name="workData">
      <InfoRuleItemTable v-model="workData" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { InfoRuleApi } from '@/api/core/inforule'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/store/modules/app'
import { InfoRuleItemVO } from '@/api/core/inforuleitem'
import InfoRuleItemTable from '@/views/core/inforule/components/InfoRuleItemTable.vue'

const props = defineProps<{
  ruleId: undefined // 所属规则（主表的关联字段）
}>()

const { t } = useI18n() // 国际化
const formLoading = ref(false) // 表单的加载中
const formData = ref<InfoRuleItemVO[]>([])

const basicData = ref<InfoRuleItemVO[]>([]) // 基础数据
const universityData = ref<InfoRuleItemVO[]>([]) // 在校信息
const admissionData = ref<InfoRuleItemVO[]>([]) // 入学信息
const degreeData = ref<InfoRuleItemVO[]>([]) // 本科/硕士信息
const personalData = ref<InfoRuleItemVO[]>([]) // 本科/硕士信息
const workData = ref<InfoRuleItemVO[]>([]) // 本科/硕士信息

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const subTabsName = ref('basicData')

// 监听主表的关联字段的变化，加载对应的子表数据
watch(
  () => props.ruleId,
  async (val) => {
    // 1. 重置表单
    formData.value = []
    basicData.value = []
    universityData.value = []
    admissionData.value = []
    degreeData.value = []
    personalData.value = []
    workData.value = []

    // 2. val 非空，则加载数据
    if (!val) {
      return
    }
    try {
      formLoading.value = true
      formData.value = await InfoRuleApi.getInfoRuleItemListByRuleId(val)

      basicData.value = formData.value.filter((item) => item.module === 'basic')
      universityData.value = formData.value.filter((item) => item.module === 'university')
      admissionData.value = formData.value.filter((item) => item.module === 'admission')
      degreeData.value = formData.value.filter((item) => item.module === 'degree')
      personalData.value = formData.value.filter((item) => item.module.startsWith('personal'))
      workData.value = formData.value.filter((item) => item.module.startsWith('work'))
    } finally {
      formLoading.value = false
    }
  },
  { immediate: true }
)

/** 表单值 */
const getData = () => {
  return formData.value
}

defineExpose({ getData })
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  justify-content: center;
}
</style>
